<template>
  <div id="topmain" class="full main">
    <!-- 指南针 -->
    <znz v-if="state.yastep != 3 && !state.is3d" :diruction="diruction"></znz>
    <!-- 中间地图 -->
    <arvideo
      ref="mainv"
      :vid="state.vid"
      :ev="state.hasev"
      :istw="state.istw"
      @change="bqclick"
      @back="backAr"
      @reget="reget"
      @setdiruction="setdiruction"
      @list="
        (v) => {
          state.bqlist = v;
        }
      "
      @alarm="alarm"
    />
    <!-- 左上角二维地图 -->
    <div class="map-box-layer" v-if="showMap">
      <mapCom @close="closeMap" :vid="state.vid" @changeGd="gdchange"></mapCom>
    </div>
    <!-- 左侧标签 -->
    <div class="left-panel-btn-box">
      <div
        class="cusbtn l1"
        :class="{ l11: showMap }"
        v-if="state.ggshow && !state.is3d"
        @click="showMap = true"
      >
        <div class="txt">二维地图</div>
      </div>
      <div
        class="cusbtn l2"
        :class="{ l22: state.showSmallvalue }"
        v-if="state.ggshow && !state.is3d"
        @click="changptz"
      >
        <div class="txt">动点画面</div>
      </div>
    </div>
    <!-- 高点下面的球机 -->
    <div class="small-video" v-if="state.showSmallvalue">
      <smallVideo :vid="state.zoomdid" :gdid="state.vid" @close="changptz" />
    </div>
    <!-- 右侧标签 -->
    <div class="right-panel-btn-box" v-show="state.yastep != 3">
      <!-- :class="state.evshow ? 'btn21' : state.hasev ? 'btn20' : ''" -->
      <div
        class="cusbtn btn2"
        :class="{
          btn21: state.evshow,
          btn20: state.hasev,
          isanimate: iswarning,
        }"
        v-if="state.ggshow && !state.is3d"
        @click="evclick"
      >
        <div class="txt">报警信息</div>
      </div>
      <div
        class="cusbtn btn3"
        :class="state.tgshow ? 'btn30' : ''"
        v-if="state.ggshow && !state.is3d"
        @click="tgclick"
      >
        <div class="txt">标签过滤</div>
      </div>
      <div
        class="cusbtn btn1"
        :class="state.ifshow ? 'btn10' : ''"
        v-if="state.ggshow && !state.is3d"
        @click="ifclick"
      >
        <div class="txt">高点列表</div>
      </div>
      <div
        class="cusbtn btn4"
        @click="changeRtsp"
        :class="state.is3d ? 'btn40' : ''"
        v-if="state.ggshow && !state.is3d"
      >
        <div class="txt">瞭望模式</div>
      </div>
      <div
        class="cusbtn btn5"
        @click="changeIsTw"
        :class="state.istw ? 'btn50' : ''"
        v-if="state.ggshow && !state.is3d"
      >
        <div class="txt">图文模式</div>
      </div>
    </div>
    <!-- 底部菜单 -->
    <div class="right-menu" v-show="state.yastep != 3 && !state.is3d">
      <div class="menu-tab" v-if="state.mnshow && state.ggshow">
        <img class="img" src="/images/new/menu1.svg" @click="yaclick" />
        <img class="img" src="/images/new/menu2.svg" @click="addclick" />
     
        <img class="img" src="/images/new/menu4.svg" @click="bkclick" />
        <!-- <img
          class="img"
          src="/images/new/menu3.svg"
          @click="bigDong"
        /> -->
      </div>
      <!-- 展开收藏 -->
      <div
        class="menubtn"
        :class="{ active: state.mnshow }"
        @click="state.mnshow = !state.mnshow"
        v-if="state.ggshow"
      ></div>
    </div>

    <!-- 全屏之后的全景 -->
    <zoomv
      class="zoomfull"
      :vid="state.zoomdid"
      @full="state.zoomfull = true"
      @close="state.zoomfull = false"
      v-if="state.is3d"
    />

    <!-- 瞭望模式 -->

    <rtsp
      v-if="showRtsp"
      @close="changeRtsp"
      :vid="state.rtspvid"
      :gdid="state.rtspdid"
    ></rtsp>

    <!-- 登陆 -->
    <!-- <login class="loginp" v-if="state.lgshow" @close="state.lgshow = false" /> -->
    <!-- 公告 -->
    <!-- <note
      class="notecs"
      :msgs="state.notices"
      v-if="state.ntshow && state.ggshow && !state.is3d"
    /> -->
    <!-- 设备列表 -->
    <dgSelect
      v-if="state.ifshow && state.ggshow"
      @close="state.ifshow = false"
      @gd="gdchange"
      @dd="ddchange"
      :vid="state.vid"
    ></dgSelect>
    <!-- 报警事件 -->
    <evinfo
      class="evcs"
      v-if="state.evshow && state.ggshow"
      @close="evclose"
      :warningItem="warningItem"
    />
    <!-- 标签过滤 -->
    <tagf
      class="tgcs"
      :tags="state.tags"
      v-show="state.tgshow && state.ggshow"
      @close="state.tgshow = false"
      @change="tagchange"
      :vid="state.vid"
    />
    <!-- 控制视频方向的 -->
    <ptz class="ptzcs" v-if="state.ddshow" :vid="state.did" />
    <!-- 低点视频弹窗 -->
    <onev
      class="onevcs"
      v-if="state.ddshow && state.ggshow"
      :vid="state.did"
      @close="state.ddshow = false"
    />
    <!-- 录像回放选择时间弹框 -->
    <bkpm
      class="bkpmcs"
      v-if="state.bkshow && state.ggshow"
      @close="state.bkshow = false"
      @ok="pmok"
    />
    <!-- 录像视频回放 -->
    <bkv
      class="bkvcs"
      v-if="state.bkvshow && state.ggshow"
      @close="state.bkvshow = false"
    />
    <!-- 高低点切换树选点位 -->
    <!-- <infos
      class="infocs"
      v-if="state.ifshow && state.ggshow"
      @close="state.ifshow = false"
      @gd="gdchange"
      @dd="ddchange"
    /> -->
    <!-- 标签的详情信息弹框 -->
    <bqinfo
      class="bqcs"
      id="bqdrag"
      :style="{ left: state.bqleft + 'px', top: state.bqTop + 'px', transform: state.isForm ? 'translateY(-100%)' : none }"
      :isd="state.isd"
      :oneData="state.bqdata"
      v-if="state.bqshow && state.ggshow"
      @close="state.bqshow = false"
      @reget="reget"
    />
    <!-- 轮询预案弹框-->
    <yalist
      class="yalcs"
      v-if="state.yastep == 1 && state.ggshow"
      @close="state.yastep = 0"
      @new="state.yastep = 2"
      @view="planview"
      @addPlan="handleNewPlan"
    />

    <!-- 编辑轮询预案 -->
    <yaedit
      class="yaecs"
      v-if="state.yastep == 2 && state.ggshow"
      @close="state.yastep = 0"
      @back="state.yastep = 1"
    />
    <!-- 轮询视频播放 -->
    <yaview
      class="yavcs"
      :vids="state.vids"
      v-if="state.yastep == 3 && state.ggshow"
      @close="overplan"
    />

    <!-- 系统设置 -->
    <syslist
      class="syscs"
      v-if="state.syshow && state.ggshow"
      @close="state.syshow = false"
    />
    <!-- 选择点、线、面标签 -->
    <xzdxm
      class="xzcs"
      v-if="state.bqstep == 1 && state.ggshow"
      @close="state.bqstep = 0"
      @change="dxmchange"
    />
    <!-- 画点、线、面的canvas -->
    <xzhb
      class="hbcs"
      :vid="state.vid"
      :tp="state.bqtype"
      v-if="(state.bqstep == 2 || state.bqstep == 3) && state.ggshow"
      @close="dxmover"
    />
    <!-- 电子放大 -->
    <xzhbBig
      class="hbcs"
      :vid="state.vid"
      :tp="state.bqtype"
      v-if="bigCanvas && state.ggshow"
      @close="closeBig"
    />
    
    <!-- 新增点线面的弹框 -->
    <xzdian
      class="xzdcs"
      :oneData="state.bqdata"
      :vid="state.vid"
      v-if="state.bqstep == 3 && state.ggshow"
      @close="bqover"
      @reget="reget"
    />
    <!-- 可视化统计 -->
    <!-- <tj
      class="tjcs"
      :vid="state.vid"
      v-if="state.tjshow"
      @close="
        state.ggshow = true;
        state.tjshow = false;
      "
    /> -->
    <audio ref="alarmSound" loop src="/images/new/warning.wav"></audio>

    <!-- 新增预案 -->
    <addPlan
      class="addPlancs"
      :visible="showAddDialog"
      @closeDig="showAddDialog = false"
    ></addPlan>
  </div>
</template>

<script setup>
import znz from "./home/znz.vue";
import login from "./home/login.vue";
import note from "./home/note.vue";
import search from "./home/search.vue";
import evinfo from "./home/evinfo.vue";
import tagf from "./home/tagf.vue";
import onev from "./home/onev.vue";
import bkpm from "./home/bkpm.vue";
import bkv from "./home/bkv.vue";
import infos from "./home/infos.vue";
import xzdxm from "./home/xzdxm.vue";
import xzhb from "./home/xzhb.vue";
import xzhbBig from "./home/xzhbBig.vue";
import xzdian from "./home/xzdian.vue";
import bqinfo from "./home/bqinfo.vue";
import yalist from "./home/yalist.vue";
import yaedit from "./home/yaedit.vue";
import yaview from "./home/yaview.vue";
import syslist from "./home/syslist.vue";
import tj from "./home/tj.vue";
import zoomv from "./home/zoom.vue";
import mapCom from "./home/map.vue";
import smallVideo from "./home/smallVideo.vue";
import dgSelect from "./home/gd.vue";
import rtsp from "./home/rtsp.vue";
import addPlan from "./home/addPlan.vue"; // 引入弹窗组件
import { ElMessage } from "element-plus";
import emitter from "@/utils/mitt";
import { nextTick } from "vue";
const state = reactive({
  istw: false, //图文模式
  showSmallvalue: false, //低点视频画面
  ggshow: true, //操作层
  lgshow: false, //登录
  ntshow: false, //公告
  mnshow: false, //菜单
  evshow: false, //事件
  hasev: false, //有无报警信息
  tgshow: false, // 标签过滤
  bkshow: false, //回放参数
  bkvshow: false, //回放
  ddshow: false, //ptz
  ifshow: false, //全景
  is3d: false, //3d
  bqshow: false, //选择
  syshow: false, //系统设置
  tjshow: false, //统计视图
  bqstep: 0, //标签添加 0不显示1选择2点线面3数据
  bqtype: 0, //新增时标签类型，1点2线3面
  bqdata: null, //点线面数据
  yastep: 0, //预案 0不显示1预案列表2新增预案 3轮询
  yav: {}, //轮询预案查看参数
  yavinx: -1, //轮询索引
  msg: "",
  vid: "", //当前高点id
  gid: "", //选择的高点id
  did: "", //选择的低点id
  zoomdid: "", //联动id
  vids: [],
  notices: [], //公共列表数据
  bqdata: {}, //点击标签带回的数据
  bqleft: 888, //标签位置
  bqTop: 0,
  isForm: false, //是否需要向上移动
  isd: false, //是否编辑标签
  bqlist: [], //当前显示的标签
  zoomfull: false,
  tags: [],
  rtspvid: "",
  rtspdid: "",
});

// 控制新增预案的弹窗
const showAddDialog = ref(false);
// 在父组件中添加方法
const handleNewPlan = () => {
  console.log("新增预案");
  showAddDialog.value = true;
};
const changeIsTw = () => {
  state.istw = !state.istw;
};

const mainv = ref();
const hideAll = () => {
  //state.ntshow= false//公告
  state.mnshow = false; //菜单
  state.evshow = false; //事件
  state.tgshow = false; // 标签过滤
  state.bkshow = false; //回放参数
  state.bkvshow = false; //回放
  state.ddshow = false; //ptz
  state.ifshow = false; //全景
  state.bqshow = false; //选择
  state.syshow = false; //系统设置
  state.tjshow = false; //统计视图
  state.bqstep = 0; //标签添加 0不显示1选择2点线面3数据
  state.bqtype = 0; //新增时标签类型，1点2线3面
  state.yastep = 0; //预案 0不显示1预案列表2新增预案 3轮询
};
const shownote = (s) => {
  state.msg = s;
  state.ntshow = false;
  nextTick(() => {
    state.ntshow = true;
  });
};
//统计
const tjclick = () => {
  state.ggshow = false;
  hideAll();
  nextTick(() => {
    state.tjshow = true;
  });
};
//新增标签
const addclick = () => {
  state.mnshow = false;
  hideAll();
  nextTick(() => {
    state.bqstep = 1;
  });
};
//点线面选择
const dxmchange = (tp) => {
  state.bqtype = tp;
  nextTick(() => {
    state.bqstep = 2;
  });
};
//点线面选择完毕
const dxmover = (data) => {
  state.bqdata = data;
  nextTick(() => {
    state.bqstep = 3;
  });
};
//标签数据完毕
const bqover = () => {
  //保存数据到后台完成
  nextTick(() => {
    state.bqstep = 0;
  });
};
const ifclick = () => {
  hideAll();
  nextTick(() => {
    state.ifshow = true;
  });
};
const evclick = () => {
  hideAll();
  nextTick(() => {
    state.evshow = true;
  });
};
const tgclick = () => {
  hideAll();
  nextTick(() => {
    state.tgshow = true;
  });
};
const zoomclick = () => {
  hideAll();
  if (state.is3d == false) {
    state.is3d = true;
  } else {
    state.is3d = false;
  }
  mainv.value.zoom();
};
//标签过滤后，将选择值赋值给底层AR
const tagchange = (val) => {
  state.tags = val;
  mainv.value.setTypes(val);
};
const getTags = () => {
  useApi
    .post("/arhome/system/tagcategory/list", {
      tagCategoryName: "",
      tagCategoryState: null,
    })
    .then((res) => {
      let data = res.data.tagCategory4SysList || [];
      state.tags = data.map((x) => x.tagCategoryId);
    });
};
//预案
const yaclick = () => {
  hideAll();
  state.mnshow = false;
  state.yastep = 0;
  nextTick(() => {
    state.yastep = 1;
  });
};
const bkclick = () => {
  state.mnshow = false;
  hideAll();
  nextTick(() => {
    state.bkshow = true;
  });
};

// 电子放大
let bigCanvas = ref(false);
const bigDong = () =>{
  bigCanvas.value = true
}

const closeBig = () =>{
  bigCanvas.value = false
}

const sysclick = () => {
  state.mnshow = false;
  hideAll();
  nextTick(() => {
    state.syshow = true;
  });
};
const pmok = () => {
  state.bkshow = false;
  state.bkvshow = false;
  nextTick(() => {
    state.bkvshow = true;
  });
};
//标签点击
const bqclick = (e, isd) => {
  state.bqshow = false;
  state.bqdata = e;
  state.isd = isd;
  console.log("特殊提示：", state.isd);
  let w = document.documentElement.clientWidth;
  let h = document.documentElement.clientHeight;
  let x = parseFloat(e.x) / 100;
  let y = parseFloat(e.y) / 100;
  if (y > 0.7) {
    state.bqTop = y * h;
    state.isForm = true; //如果y大于0.8，说明是低点，表单在下方
  } else {
    state.bqTop = y * h;
    state.isForm = false;
  }
  if (x > 0.7) {
    state.bqleft = x * w - 450;
  } else {
    state.bqleft = x * w + 100;
  }
  nextTick(() => {
    state.bqshow = true;
    setTimeout(() => {
      drag("bqdrag");
    }, 500);
  });
};

const drag = (id) => {
  var draggable = document.getElementById(id);
  var isDraggable = false;
  var offset = { x: 0, y: 0 };
  draggable.addEventListener("mousedown", function (e) {
    isDraggable = true;
    offset.x = e.clientX - draggable.offsetLeft;
    offset.y = e.clientY - draggable.offsetTop;
    e.preventDefault();
  });
  draggable.addEventListener("mousemove", function (e) {
    if (isDraggable) {
      draggable.style.left = e.clientX - offset.x + "px";
      draggable.style.top = e.clientY - offset.y + "px";
    }
  });
  draggable.addEventListener("mouseup", function (e) {
    isDraggable = false;
  });
};

const backAr = (gid, did, respgid, rtspdid, irtCameraIndexCode) => {
  state.vid = gid;
  state.zoomdid = did;
  state.rtspvid = respgid;
  state.rtspdid = rtspdid;
  window.parent.postMessage(
    {
      type: "iframe",
      data: {
        cameraId: gid,
        cameraIndexCode: respgid,
        movedCameraIndexCode: rtspdid,
        irtCameraIndexCode: irtCameraIndexCode,
      },
    },
    "https://vp.bcdtech.cn:8787"
  );
};
//高点切换
const gdchange = (node) => {
  state.vid = node.cameraId;
  //state.vid = '1766027258688049162'
  state.rtspvid = node.cameraIndexCode;
  state.rtspdid = node.movedCameraIndexCode;
  window.parent.postMessage(
    {
      type: "iframe",
      data: {
        cameraId: node.cameraId,
        cameraIndexCode: node.cameraIndexCode,
        moveCameraIndexCode: node.moveCameraIndexCode,
        irtCameraIndexCode: node.irtCameraIndexCode,
      },
    },
    "https://vp.bcdtech.cn:8787"
  );
};
//低点切换
const ddchange = (node) => {
  state.did = node.cameraId;
  state.ddshow = true;
};
//预案轮询
const planview = () => {
  let store = useMyStore();
  state.yav = store.params.yav || {};
  if (state.yav.time) {
    state.yavinx = -1;
    state.yastep = 3;
    plan();
  }
};
//轮询
const plan = () => {
  state.yavinx++;
  if (state.yavinx >= state.yav.plans.length) {
    state.yavinx = 0;
  }
  state.vid = state.yav.plans[state.yavinx].highCameraId;
  state.vids = state.yav.plans[state.yavinx].lowCameraIds;
  setTimeout(() => {
    plan();
  }, 1000 * 60 * state.yav.time);
};
//结束轮询
const overplan = () => {
  clearTimeout();
  state.yavinx = -1;
  state.vid = "";
  state.yastep = 0;
};
//添加标签后重新获取
const reget = () => {
  state.bqstep = 0; //关闭新增标签
  state.bqshow = false; //删除标签后关闭详情
  mainv.value.reget();
};
const getNote = () => {
  useApi.post("/arhome/getnotice", {}).then((res) => {
    state.notices = res.data.noticeList;
    if (state.notices.length < 1) {
      state.ntshow = false;
    } else {
      state.ntshow = true;
    }
  });
};
//标签查询
const bqfilter = (id) => {
  mainv.value.setChoose(id);
};

let warningItem = ref({});
let iswarning = ref(false);
let alarmSound = ref();
const alarm = (str) => {
  // ElMessage.warning(str);
  // state.hasev = true;
  warningItem.value = str;
  iswarning.value = true;
  alarmSound.value.play();
  setTimeout(() => {
    iswarning.value = false;
  }, 15000);
  setTimeout(() => {
    alarmSound.value.pause();
    alarmSound.value.currentTime = 0;
  }, 3000);
};
const evclose = () => {
  state.evshow = false;
  state.hasev = false;
};

let showMap = ref(false);
const closeMap = () => {
  showMap.value = false;
};

// 高点动点切换
const changptz = () => {
  state.showSmallvalue = !state.showSmallvalue;
  state.is3d = !state.is3d;
};

// rtsp展示
let showRtsp = ref(false);

const changeRtsp = () => {
  // showRtsp.value = !showRtsp.value;
  window.parent.postMessage(
    {
      type: "iframe",
      data: {
        type: "rtsp",
      },
    },
    "https://vp.bcdtech.cn:8787"
    // "http://localhost:5173"
  );
};

let diruction = ref("");
const setdiruction = (info) => {
  diruction.value = info;
};

onMounted(() => {
  let route = useRoute();
  //如果带token，保存后重新首页
  if (route.query.token) {
    let store = useMyStore();
    store.token = route.query.token;
    navigateTo("/");
  }

  useApi.post("/arhome/common/getparamdict", {}).then((res) => {
    let store = useMyStore();
    store.params.dict = res.data;
    //console.log('Success:', user);
  });
  getNote();
  getTags();
  // iframe页面
  window.addEventListener("message", (event) => {
    if (event.origin === "https://vp.bcdtech.cn:8787") {
      // 确保消息来自父页面
      // initPlayer();
      // play()
      if (event.data && event.data.cameraId) {
        gdchange(event.data);
      }
    }
  });

  emitter.on("setInstruction", (data) => {
    switch (data.deviceName) {
      case "ar-ewdt":
        showMap.value = !showMap.value;
        break;
      case "ar-ddhm":
        changptz();
        break;
      case "ar-bjxx":
        evclick();
        break;
      case "ar-bqgl":
        tgclick();
        break;
      case "ar-gdlb":
        ifclick();
        break;
      case "ar-lwms":
        changeRtsp();
        break;
    }
  });
  //getAlarm()
});
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  width: 3840px;
  height: 1620px;
  // width: 100%;
  // height: 100%;
}

.btn01 {
  position: absolute;
  right: 5.5%;
  top: 4.26%;
  width: 32px;
  height: 32px;
  background-image: url("/images/bt01.png");
}

.btn02 {
  position: absolute;
  right: 3%;
  top: 4.26%;
  width: 32px;
  height: 32px;
  background-image: url("/images/bt02.png");
}

.btn03 {
  position: absolute;
  left: calc(50% - 30px);
  bottom: 3.9%;
  width: 60px;
  height: 40px;
  background-image: url("/images/more.png");
}

.btn04 {
  position: absolute;
  left: calc(50% - 30px);
  bottom: 3.9vh;
  width: 60px;
  height: 40px;
  background-image: url("/images/more1.png");
}

.more {
  animation: moremove 2s infinite linear;
}

@keyframes moremove {
  0%,
  100% {
    bottom: 3.9vh;
  }

  50% {
    bottom: calc(3.9vh + 5px);
  }
}

.mn {
  position: absolute;
  left: calc(50% - 295px);
  bottom: 15%;
  width: 570px;
  height: 40px;
  display: flex;

  .img {
    cursor: pointer;
    width: 100px;
    height: 90px;
    margin: 0 10px;

    &:hover {
      opacity: 0.8;
    }
  }
}

.btn1 {
  // position: absolute;
  // right: 2.6%;
  // top: 9.8%;
  background-image: url("/images/new/btn2.png");
}

.btn10 {
  background-image: url("/images/new/btn22.png");
}

.btn2 {
  background-image: url("/images/new/btn4normal.png");
  &.isanimate {
    background-image: url("/images/new/btn4.png");
    animation: blink 1s infinite;
  }
}

@keyframes blink {
  0% {
    background: transparent;
  }
  50% {
    background-image: url("/images/new/btn4.png");
    background-size: 100% 100%;
  }
  100% {
    background: transparent;
  }
}

.btn20 {
  background-image: url("/images/new/btn4.png");
}

.btn21 {
  background-image: url("/images/new/btn44.png");
}

.btn3 {
  background-image: url("/images/new/btn1.png");
}

.btn30 {
  background-image: url("/images/new/btn11.png");
}

.btn4 {
  background-image: url("/images/new/btn3.png");
}

.btn40 {
  background-image: url("/images/new/btn33.png");
}

.btn5 {
  background-image: url("/images/new/switch/close.png");
}

.btn50 {
  background-image: url("/images/new/switch/active.png");
}

.loginp {
  position: absolute;
  left: 40%;
  top: 40%;
}

.inp {
  position: absolute;
  left: 4.5%;
  top: 5%;
}

.evcs {
  position: absolute;
  right: 296px;
  top: 375px;
}

.tgcs {
  position: absolute;
  right: 321px;
  top: 543.5px;
}

.ptzcs {
  position: absolute;
  right: 5%;
  bottom: 5%;
}

.onevcs {
  position: absolute;
  left: 23.6%;
  top: 13.6%;
}

.bkpmcs {
  position: absolute;
  left: 45%;
  top: 25%;
}

.bkvcs {
  position: absolute;
  left: 18.3%;
  top: calc(50% - 400px);
}

.infocs {
  position: absolute;
  left: 6%;
  top: 22%;
}

.xzcs {
  position: absolute;
  left: 40%;
  top: 37.8%;
}

.hbcs {
  position: absolute;
  left: 0;
  top: 0;
}

.xzdcs {
  position: absolute;
  left: 42%;
  top: 20%;
}
.addPlancs {
  position: absolute;
  left: 42%;
  top: 20%;
}
.bqcs {
  position: absolute;
  left: 50%;
  top: 30%;
}

.notecs {
  position: absolute;
  left: 38%;
  top: 9%;
}

.yalcs {
  position: absolute;
  left: 38%;
  top: 29%;
}

.yaecs {
  position: absolute;
  left: 24%;
  top: 20%;
}

.yavcs {
  position: absolute;
  left: 0;
  bottom: 160px;
}

.syscs {
  position: absolute;
  left: 8vw;
  top: 14vh;
}

.tjcs {
  position: absolute;
  left: 0;
  top: 0;
}
.zoomv {
  position: absolute;
  left: 3vw;
  bottom: 3vh;
  width: 400px;
  height: 256px;
}
.zoomfull {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss" scoped>
.right-menu {
  position: absolute;
  right: 250px;
  bottom: 130px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  .menubtn {
    margin-left: 20px;
    width: 100px;
    height: 183px;
    background: url("/images/new/right.png");
    background-size: contain;
    transform: rotate(180deg);
    &.active {
      transform: rotate(0deg);
    }
  }
  .menu-tab {
    .img {
      width: 183px;
      height: 183px;
    }
  }
}
.l1 {
  background-image: url("/images/new/l1.svg");
}
.l11 {
  background-image: url("/images/new/l11.svg");
}
.l2 {
  background-image: url("/images/new/l2.svg");
}
.l22 {
  background-image: url("/images/new/l22.svg");
}
.small-video {
  position: absolute;
  left: 112px;
  top: 145px;
}
.map-box-layer {
  position: absolute;
  top: 216px;
  left: 270px;
  z-index: 999;
}
</style>
